<template>
  <div class="contain">
    <div class="top">
      <div class="left">
        <img :src="userInfo.avatarUrl" class="image">
      </div>
      <div class="center">
        <div class="center_up">
          <label>用户名：{{userInfo.nickName}}</label>
        </div>
      </div>
    </div>
    <div class="down">
      <div v-for="i in numsOfRound" class="flex-item">
        <button class="btn" @click="toRound(i)">
          {{i+1}}
        </button>
      </div>
    </div>
    <div>
      <button @click="add" class="btn">+</button>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        userInfo: '',
        numsOfRound: 1
      }
    },
    methods: {
      add () {
        wx.navigateTo({
          url: '/pages/add-round/main'
        })
      },
      toRound (i) {
        this.$store.state.roundSelectNum = i
        // 获得选择关卡的信息
        this.$fly.get(this.$store.state.URL + '/studygo/gateway/getGate', {
          subject: this.$store.state.managerSubject,
          grade: this.$store.state.managerGrade,
          number: i.toString()
        })
          .then((response) => {
            this.$store.state.roundSelectedDate = response.data.data
          })
          .catch((error) => {
            console.log(error)
          })
        wx.navigateTo({
          url: '/pages/round-setting/main'
        })
      },
      getNumsOfRound () {
        this.$fly.get(this.$store.state.URL + '/studygo/gateway/getNumberOfGatewway', {
          subject: this.$store.state.managerSubject,
          grade: this.$store.state.managerGrade
        })
          .then((response) => {
            this.numsOfRound = response.data.data
            this.$store.state.numsOfRound = this.numsOfRound
          })
          .catch((error) => {
            console.log(error)
          })
      }
    },
    beforeMount () {
      this.userInfo = wx.getStorageSync('userInfo')
      this.getNumsOfRound()
    },
    onShow () {
      this.getNumsOfRound()
    }
  }
</script>

<style>
  .flex-item {
    flex-wrap: wrap;
    vertical-align: top;
    flex: 0 0 25%;
    text-align: center;
    display: inline-block;

  }

  .btn {
    margin: 20rpx;
    background: aquamarine;
    height: 60px;
    width: 60px;
    border-radius: 30px 30px 30px 30px;
    margin-left: 10%;
  }

  .top {
    height: 100px;
    float: top;
    position: relative;
  }

  .down {
    padding-bottom: 50px;
    float: bottom;
    position: relative;
    margin-top: 30%;
  }

  .left {
    float: left;
    position: relative;

  }

  .center {
    margin-left: 30%;
    margin-right: 40%;
    height: 100px;
    align-items: center;
    position: relative;
  }

  .right {
    float: right;
    position: relative;
  }

  .center_up {
    height: 50px;
    font-size: 16px;
    float: top;
    position: relative;
    font-family: "华文楷体";
  }

  .center_down {
    height: 50px;
    font-size: 16px;
    float: bottom;
    position: relative;

  }

  .right_up {
    height: 50px;
    font-size: 16px;
    float: top;
  }

  .right_down {
    height: 50px;
    font-size: 16px;
    float: bottom;
    position: relative;

  }

  .image {
    height: 90px;
    width: 90px;
  }
</style>
